<template>
  <div class="box">
    <div class="pingjia">
      <div class="ping">
        <span class="pi">商家好评率</span>
        <span class="ng">100.00%</span>
      </div>
    </div>
    <div class="yonghu" v-for="(list,index) in datalist" :key="index">
      <img class="imgs1" :src="list.member_icon" alt />
      <span class="span1">{{list.member_nick_name}}</span>
      <span class="span2">{{list.star==1?'🌟':list.star==2?'🌟🌟':list.star==3?'🌟🌟🌟':list.star==4?'🌟🌟🌟🌟':'🌟🌟🌟🌟🌟'}}</span>
      <p style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{list.content}}</p>
      <span v-if="list.pics!=''">
       <span v-for="(imglist, indexs) in list.pics" :key="indexs">
       <img class="imgs3" :src="imglist" alt />
        </span>
      </span><span v-else></span>
      <div>
        <span class="tang">{{list.order_status==0?'外卖':list.order_status==1?'订餐':list.order_status==2?'拼团':list.order_status==3?'预定':list.order_status==4?'超市':'积分订单'}}</span>
        <span class="riqi">{{list.comment_time}}</span>
      </div>
    </div>
    <div v-if="pagenum == 0">
      <p style="  text-align: center;">---已经到底了---</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      datalist: [], //.wxml文件需要绑定的列表，我这里用的数据类型是数组
      pagenum: 1 //初始页默认值为1
    };
  },

  methods: {
    getdatalist: function() {
      //可在onLoad中设置为进入页面默认加载
      var that = this;
      wx.request({
        url: "http://localhost:7777/prom/getAllEva",
        data:{
            sequenceNum: that.pagenum, //从数据里获取当前页数
//          pageSize: 10 //每页显示条数
        },
        success(data) {
          if (data.statusCode == 200) {
              if(data.data.length==0){ //判断上是否还有数据
                  that.pagenum = 0;
              }
            var arr1 = that.datalist;//从页面data获取当前datalist数组
            var arr2 = data.data;//从此次请求返回的数据中获取新数组
            arr1 = arr1.concat(arr2);//合并数组
            that.datalist=arr1;//更新数组
          }
        },
        fail(err) {
          console.log(err);
        }
      });
    }
  },
  onReachBottom: function() {//触底开始下一页
    var that = this;
    if(that.pagenum > 0){
        that.pagenum ++; //当前页数并+1
        that.getdatalist(); //重新调用请求获取下一页数据
    }  
  },
  onLoad() {
    var that = this;
    that.getdatalist();
  },
  created() {
    //     // let app = getApp()
    //     const that = this;
    //     var url = "http://localhost:7777/prom/getProAppraise";
    //     wx.request({
    //         url,
    //         success(data){
    //             if (data.statusCode==200) {
    //                 that.ProAppraise = data.data.getProAppraise;
    //             }
    //             console.log(JSON.stringify(data));
    //         },
    //         fail(err){
    //             console.log(err);
    //         }
    //     });
  }
};
</script>

<style scoped>
.box {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: #f0f2f5;
}
.pingjia {
  background-color: white;
}
.pingjia .ping {
  padding-top: 23px;
  height: 47px;
}

.pingjia .ping .pi {
  margin-left: 112px;
  font-size: 15px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
}

.pingjia .ping .ng {
  margin-left: 14px;
  font-size: 15px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: rgba(241, 73, 73, 1);
}

.yonghu {
  width: 100%;
  margin-top: 9px;
  background-color: white;
}

.yonghu .imgs1 {
  width: 24px;
  height: 24px;
  margin-top: 15px;
  margin-left: 16px;
}

.yonghu .span1 {
  margin-left: 5px;
  font-size: 11px;
  font-family: PingFang;
  font-weight: 500;
  color: rgba(34, 34, 34, 1);
}

.yonghu .span2 {
  float:right;
  margin-top: 15px;
  margin-right: 15px;
  font-size: 11px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
}

.yonghu p {
  margin-top: 13px;
  margin-left: 13px;
  font-size: 13px;
  font-family: PingFang;
  font-weight: 500;
  color: rgba(34, 34, 34, 1);
}

.yonghu div .tang {
  display: inline-block;
  width: 34px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  margin-top: 19px;
  margin-left: 24px;
  background: rgba(174, 91, 159, 1);
  border-radius: 3px;
  font-size: 11px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
}

.yonghu div .riqi {
  font-size: 12px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  margin-top: 19px;
  color: rgba(163, 165, 168, 1);
  margin-top: 20px;
  margin-left: 170px;
}



.imgs3 {
  width: 100px;
  height: 100px;
  margin-top: 14px;
  margin-left: 18px;
}

</style>
